<template>
  <div class="equipmentMaintenance">
    <MetaSearchForm @on-search="tableSearch">
      <el-form ref="equipmentMaintenance_form" :model="searchData" label-width="105px">
        <el-form-item label="设备序列号" class="equipmentMaintenance_formItem">
          <el-input v-model="searchData.sernumber" placeholder="请输入设备序列号" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户设备名称" class="equipmentMaintenance_formItem">
          <el-input v-model="searchData.equipmentname" placeholder="请输入用户设备名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="设备名称" class="equipmentMaintenance_formItem">
          <el-input v-model="searchData.alias" placeholder="请输入设备名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="主板编号" class="equipmentMaintenance_formItem">
          <el-input v-model="searchData.snid" placeholder="请输入主板编号" clearable></el-input>
        </el-form-item>
        <el-form-item label="部署状态" class="equipmentMaintenance_formItem">
          <el-select v-model="searchData.isDeploy" placeholder="请选择部署类型" clearable>
            <el-option label="未部署" value="0"></el-option>
            <el-option label="已部署" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户" class="equipmentMaintenance_formItem">
          <el-select v-model="searchData.customerId" placeholder="请选择客户" clearable>
            <el-option
              v-for="item in customerList"
              :key="item.id"
              :label="item.customerName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </MetaSearchForm>
    <MetaPageTable
      ref="equipmentMaintenanceTable"
      class="equipmentMaintenance_table"
      table-title="设备管理"
      :need-checkbox="false"
      :is-auto-req="false"
      :display-item="displayItem"
      :table-data="equTableData"
      :line-btn-group="lineBtnGroup"
      @lineBtnClick="tableInlineBtnClick"
    />
    <el-dialog
      v-if="equipmentInfoDialogFlag"
      title="设备详情"
      :visible.sync="equipmentInfoDialogFlag"
      width="80%"
      modal
      center
      class="equipmentInfo_dialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false">
      <div class="equipmentInfo_bg">
        <MetaTab ref="equipmentInfoTab" :page-option="pageOption" @tabClick="tabClick">
          <template slot="eqtInfo">
            <div class="metaTab_itemBg">
              <el-form ref="equipmentInfo_form" :model="equipmentInfo" label-width="130px">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="设备序列号">
                      <span class="equipmentInfo_text">{{equipmentInfo.sernumber ? equipmentInfo.sernumber : '-'}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="部署状态">
                      <span class="equipmentInfo_text">{{equipmentInfo.isDeploy == '1' ? '已部署' : '未部署'}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="用户设备名称">
                      <span class="equipmentInfo_text">{{equipmentInfo.equipmentname ? equipmentInfo.equipmentname : '-'}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="设备名称">
                      <span class="equipmentInfo_text">{{equipmentInfo.alias ? equipmentInfo.alias : '-'}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="主板编号">
                      <span class="equipmentInfo_text">{{equipmentInfo.snid ? equipmentInfo.snid : '-'}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="设备类型">
                      <span v-if="equipmentInfo.equipmentType == '1'" class="equipmentInfo_text">浮标式设备</span>
                      <span v-else-if="equipmentInfo.equipmentType == '2'" class="equipmentInfo_text">便携式设备</span>
                      <span v-else-if="equipmentInfo.equipmentType == '3'" class="equipmentInfo_text">岸基式设备</span>
                      <span v-else-if="equipmentInfo.equipmentType == '4'" class="equipmentInfo_text">管道式设备</span>
                      <span v-else class="equipmentInfo_text">-</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="通讯模块编号">
                      <span class="equipmentInfo_text">{{equipmentInfo.communicationCode ? equipmentInfo.communicationCode : '-'}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="通讯模块型号">
                      <span class="equipmentInfo_text">{{equipmentInfo.model ? equipmentInfo.model : '-'}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="设备版本">
                      <span class="equipmentInfo_text">{{equipmentInfo.version ? equipmentInfo.version : '-'}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="设备型号">
                      <span class="equipmentInfo_text">{{equipmentInfo.equipmentModelName ? equipmentInfo.equipmentModelName : '-'}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="光栅编号">
                      <span class="equipmentInfo_text">{{equipmentInfo.rasterNumber ? equipmentInfo.rasterNumber : '-'}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="sim卡号">
                      <span class="equipmentInfo_text">{{equipmentInfo.sim ? equipmentInfo.sim : '-'}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="设备所在地">
                      <span class="equipmentInfo_text">{{equipmentInfo.address ? equipmentInfo.address : '-'}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="波段(nm)">
                      <span v-if="equipmentInfo.bandType == '02'" class="equipmentInfo_text">1000-1700</span>
                      <span v-else-if="equipmentInfo.bandType == '03'" class="equipmentInfo_text">400-1700</span>
                      <span v-else-if="equipmentInfo.bandType == '04'" class="equipmentInfo_text">200-1000</span>
                      <span v-else class="equipmentInfo_text">400-1000</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="算法">
                      <span class="equipmentInfo_text">{{equipmentInfo.algoName ? equipmentInfo.algoName : '-'}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="设备围栏">
                      <span class="equipmentInfo_text">{{equipmentInfo.longitude + ',' + equipmentInfo.latitude + ' 半径 ' + equipmentInfo.radius}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="客户">
                      <span class="equipmentInfo_text">{{equipmentInfo.customerName ? equipmentInfo.customerName : '-'}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="备注">
                      <span class="equipmentInfo_text">{{equipmentInfo.remark ? equipmentInfo.remark : '-'}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </template>
          <template slot="maintenanceInfo">
            <div class="metaTab_itemBg">
              <el-form ref="maintenanceInfo_form" :model="maintenanceInfo" label-width="130px">
                <div class="maintenanceInfo_formItem" v-for="item in environmentTypeDatas" :key="item.key">
                  <el-form-item :label="item.value">
                    <span class="maintenanceInfo_text">{{getValueFromQualityEnum(item.key,maintenanceInfo[item.key])}}</span>
                  </el-form-item>
                </div>
                <el-form-item label="部署图片">
                  <div class="maintenanceInfo_imgArea" v-for="imgItem in maintenanceInfo.imageIds" :key="imgItem">
                    <img :src="imgUrl + imgItem" class="maintenanceInfo_img">
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </template>
          <template slot="record">
            <div class="metaTab_itemBg">
              <MetaPageTable
                ref="equipmentMaintenanceRecordTable"
                class="equipmentMaintenanceRecord_table"
                table-title="设备操作记录"
                :need-checkbox="false"
                :is-auto-req="false"
                tableHeight="350"
                :display-item="recordDisplayItem"
                :table-data="eqtRecordDatas"
                :btn-group="recordBtnGroup"
                @btnClick="recordTableBtnClick"
              />
            </div>
          </template>
          <template slot="electric">
            <div ref="electricChart" class="electricChart"></div>
          </template>
        </MetaTab>
      </div>
    </el-dialog>
    <el-dialog
      v-if="equipmentRecordAddDialogFlag"
      title="添加记录"
      :visible.sync="equipmentRecordAddDialogFlag"
      width="40%"
      modal
      center
      class="equipmentInfo_dialog"
      :close-on-press-escape="false">
      <div class="equipmentRecordAdd_bg">
        <el-form ref="recordAdd_form" :model="equipmentRecord" label-width="80px" :rules="recordRules">
          <el-form-item label="记录" prop="recordText">
            <el-input v-model="equipmentRecord.recordText" type="textarea" :rows="4" placeholder="请输入设备记录" class="equipmentInfo_input"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="dialogFooter">
        <el-button size="mini" @click="closeRecordAddDialog()">取消</el-button>
        <el-button
          type="primary"
          size="mini"
          @click="saveRecord()"
        >保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import MetaPageTable from '../components/MetaPageTable'
import MetaSearchForm from '../components/MetaSearchForm'
import MetaTab from '../components/MetaTab'
import deepClone from '../utils/deepClone'
import utils from "@/utils/utils";
export default {
  name: 'equipmentMaintenance',
  components: {
    MetaPageTable,
    MetaSearchForm,
    MetaTab
  },
  data () {
    var checkRecord = (rule, value, callback) => {
      if (value.trim() === '') {
        return callback(new Error('请输入运维记录'))
      }else{
        return callback()
      }
    }
    return {
      electricChart: null,
      alertPositionFlag: false,
      equipmentRecordAddDialogFlag: false,
      imgUrl: process.env.API_ALERT_API + 'attachment/getImage?id=',
      addrSearchVal: '',
      addrSelect: [],
      equPositionMap: null,
      equipmentPosition: {},
      tableChangeDialogFlag: false,
      equipmentInfoDialogFlag: false,//设备详情
      equipmentInfo: {},
      maintenanceInfo: {},
      searchData: {
        sernumber: '',
        equipmentname: '',
        ontype: '',
        snid: '',
        alias: '',
        customerId: '',
        isDeploy: ''
      },
      equTableData: {},
      searchDataForTable: {},
      provinceList: [],
      cityList: [],
      areaList: [],
      displayItem: [
        {
          label: '设备序列号',
          prop: 'sernumber'
        },
        {
          label: '用户设备名称',
          prop: 'equipmentname'
        },
        {
          label: '设备名称',
          prop: 'alias'
        },
        {
          label: '部署状态',
          prop: 'isDeploy',
          type: 'if',
          format: {
            '1': '已部署'
          },
          color: {
            '1': 'green'
          }
        },
        {
          label: '主板编号',
          prop: 'snid'
        },
        {
          label: '设备类型',
          prop: 'equipmentType',
          type: "if",
          format: {
            '1': "浮标式设备",
            '2': "便携式设备",
            '3': "岸基式设备",
            '4': "管道式设备",
            '5': "潜入式设备",
          }
        },
        {
          label: '设备版本',
          prop: 'version'
        },
        {
          label: '通讯模块编号',
          prop: 'communicationCode'
        },
        {
          label: '通讯模块型号',
          prop: 'model'
        },
        {
          label: '光栅编号',
          prop: 'rasterNumber'
        },
        {
          label: 'sim卡号',
          prop: 'sim'
        },
        {
          label: '设备型号',
          prop: 'equipmentModelName'
        },
        {
          label: '客户',
          prop: 'customerName'
        },
        // {
        //   label: '波段(nm)',
        //   prop: 'bandType',
        //   type: 'if',
        //   format: { // 400-1000 -> 01 , 1000-1700 -> 02 , 400-1700 -> 03 , 200-1000 -> 10
        //     '01': "400-1000",
        //     '02': "1000-1700",
        //     '03': "400-1700",
        //     '10': "200-1000"
        //   }
        // },
        // {
        //   label: '设备位置（纬度）',
        //   prop: 'latitude'
        // },
        // {
        //   label: '设备位置（经度）',
        //   prop: 'longitude'
        // },
        // {
        //   label: '围栏半径',
        //   prop: 'radius'
        // },
        {
          label: '设备所在地',
          prop: 'address',
        },
        {
          label: '算法名称',
          prop: 'algoName'
        },
        // {
        //   label: '状态',
        //   prop: 'ontype',
        //   type: "if",
        //   format: {
        //     '1': "在线",
        //     '2': "调试",
        //     '3': "维修",
        //     '4': "报警",
        //   },
        //   color: {
        //     '1': '#00E436',
        //     '2': '#00A8FF',
        //     '3': '#FFA11A',
        //     '4': '#FF501A'
        //   }
        // },
        // {
        //   label: '可见光积分',
        //   prop: 'visible_light_integral',
        // },
        // {
        //   label: '补光灯电压',
        //   prop: 'fill_lamp_voltage',
        // },
        // {
        //   label: '短波积分',
        //   prop: 'shot_wave_integral',
        // },
        // {
        //   label: '设置增益',
        //   prop: 'data_value_gain',
        // },
        // // {
        // //   label: '采集密度',
        // //   prop: 'acquisition_density',
        // // },
        // {
        //   label: '设置偏压',
        //   prop: 'power_supply_bias',
        // },
        // {
        //   label: '参数a',
        //   prop: 'parama',
        // },
        // {
        //   label: '参数b',
        //   prop: 'paramb',
        // },
        // {
        //   label: '参数c',
        //   prop: 'paramc',
        // },
        {
          label: '备注',
          prop: 'remark',
        },
      ],
      lineBtnGroup: [
        {
          id: 'deployCancel',
          title: '撤销部署',
          hideCheck: this.btnHidecheck
        },
        {
          id: 'deploy',
          title: '部署',
          hideCheck: this.btnHidecheck
        },
        {
          id: 'info',
          title: '详情'
        }
      ],
      customerList: [], //客户
      equipmentModelList: [], //设备型号
      pageOption: [
        {
          key: 'eqtInfo',
          label: '设备信息'
        },
        {
          key: 'maintenanceInfo',
          label: '部署信息'
        },
        {
          key: 'record',
          label: '维修&记录'
        },
        {
          key: 'electric',
          label: '设备电量'
        },
      ],
      waterQualityEnumDatas: {},
      environmentTypeDatas: [],
      eqtRecordDatas: {},
      recordDisplayItem: [
        {
          label: '记录',
          prop: 'recordContent'
        },
        {
          label: '类型',
          prop: 'useType'
        },
        {
          label: '时间',
          prop: 'createDate'
        },
        {
          label: '操作人',
          prop: 'createUser'
        },
      ],
      recordBtnGroup: [
        {
          id: 'recordAdd',
          title: '添加',
        }
      ],
      equipmentRecord: {
        recordText: ''
      },
      recordRules: {
        recordText: [
          { required: true, validator: checkRecord, trigger: 'blur' },
          { max: 80, message: '长度少于80个字', trigger: 'blur' }
        ]
      }
    }
  },
  created() {

  },
  mounted() {

    //获取客户列表
    this.getCustomerList()
    //获取设备型号列表
    this.getEquipmentModelList()
    this.initTableData(true)

    // this.$nextTick(() => {
    //   this.$refs.equipmentInfoTab.changePage('eqtInfo')
    // })
    this.getEnumEnvironmentType(() => {
      this.getEnumDatas()
    })
  },
  methods: {
    initTableData(reflash) {
      let params = {}
      params = this.searchDataForTable
      params.page = 1
      params.limit = 9999999
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + 'equipmentInfo/equipmentList',
        method: "post",
        data: params
      }).then(res => {
        if (res.data.code === 200) {
          this.equTableData = res.data.result
          this.$nextTick(() => {
            this.$refs.equipmentMaintenanceTable.formDataInit(reflash)
          })
        }else {
          this.$notify.error({
            title: '错误',
            message: res.data.message
          });
        }
      })
    },
    getCustomerList() {
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + 'admin/customer',
        method: "post",
        data: {
          page: 1,
          limit: 99999999
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.customerList = res.data.result.content
        }else {
          this.$notify.error({
            title: '错误',
            message: res.data.message
          });
        }
      })
    },
    tableInlineBtnClick(item) {
      if (item.button === 'deployCancel') {
        //撤销部署
        this.$confirm('确认撤销当前设备的部署状态?', '状态变更', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let bsParams = {
            equipmentId: item.rows.equipmentId,
            isDeploy: '0',
            deployPerson: localStorage.getItem('username'),
            imageIds: item.rows.imageIds,
            latitude: item.rows.latitude && item.rows.latitude !== '' ? item.rows.latitude : 0,
            longitude: item.rows.longitude && item.rows.longitude !== '' ? item.rows.longitude : 0,
            radius: item.rows.radius && item.rows.radius !== '' ? item.rows.radius : 0,
          }
          this.$fetch({
            url: process.env.PROGOO_GATE_WATER + "equipmentInfo/deploy",
            method: "post",
            data: bsParams
          }).then(res => {
            if (res.data.code === 200) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.initTableData(false)
            }else {
              this.$notify.error({
                title: '错误',
                message: res.data.message
              });
            }
          })
        })
      }else if (item.button === 'deploy') {
        //部署设备
        this.$confirm('确认设置当前设备为部署状态?', '状态变更', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let bsParams = {
            equipmentId: item.rows.equipmentId,
            isDeploy: '1',
            deployPerson: localStorage.getItem('username'),
            imageIds: item.rows.imageIds,
            latitude: item.rows.latitude && item.rows.latitude !== '' ? item.rows.latitude : 0,
            longitude: item.rows.longitude && item.rows.longitude !== '' ? item.rows.longitude : 0,
            radius: item.rows.radius && item.rows.radius !== '' ? item.rows.radius : 0,
          }
          this.$fetch({
            url: process.env.PROGOO_GATE_WATER + "equipmentInfo/deploy",
            method: "post",
            data: bsParams
          }).then(res => {
            if (res.data.code === 200) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.initTableData(false)
            }else {
              this.$notify.error({
                title: '错误',
                message: res.data.message
              });
            }
          })
        })
      }else if (item.button === 'info') {
        this.equipmentInfo = item.rows
        this.$fetch({
          url: process.env.PROGOO_GATE_WATER + 'equipmentInfo/equipmentById',
          method: "get",
          params: {
            id: this.equipmentInfo.equipmentId
          }
        }).then(res => {
          if (res.data.code === 200) {
            this.maintenanceInfo = res.data.result
            this.equipmentInfoDialogFlag = true
          }else {
            this.$notify.error({
              title: '错误',
              message: res.data.message
            });
          }
        })
      }
    },
    tableSearch() {
      this.searchDataForTable = deepClone(this.searchData)
      this.initTableData(true)
    },
    getEquipmentModelList() {
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "admin/EquipmentModel",
        method: "post",
        data: {
          page: 1,
          limit: 99999999
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.equipmentModelList = res.data.result.content
        }else {
          this.$notify.error({
            title: '错误',
            message: res.data.message
          });
        }
      })

    },
    btnHidecheck(rowData, item) {
      if(rowData.isDeploy === '0' && item.id === 'deploy') {
        return true
      }
      if(rowData.isDeploy === '1' && item.id === 'deployCancel') {
        return true
      }
      return false
    },
    getEnumEnvironmentType(callback) {
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "domains/getList",
        method: "post",
        data: ['environmentType'],
      }).then((res) => {
        if(res.data.code === 200) {
          this.environmentTypeDatas = res.data.result['environmentType']
          if(callback && typeof(callback) === 'function') {
            callback()
          }
        }else {
          this.$notify.error({
            title: "错误",
            message: res.data.message,
          });
        }
      });
    },
    getEnumDatas() {
      let keys = []
      for(let i in this.environmentTypeDatas) {
        keys.push(this.environmentTypeDatas[i].key)
      }
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "domains/getList",
        method: "post",
        data: keys,
      }).then((res) => {
        if(res.data.code === 200) {
          this.waterQualityEnumDatas = res.data.result
        }else {
          this.$notify.error({
            title: "错误",
            message: res.data.message,
          });
        }
      });
    },
    getValueFromQualityEnum(key, id) {
      let res = ''
      if(id && id !== '') {
        let enumData = this.waterQualityEnumDatas[key]
        for(let i in enumData) {
          if(id == enumData[i].key) {
            res = enumData[i].value
            break
          }
        }
      }
      return res
    },
    getEqtRecord(reflash) {
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "equipmentUsedRecord/getEquipmentUsedRecordList",
        method: "get",
        params: {
          equipmentId: this.equipmentInfo.equipmentId,
        }
      }).then((res) => {
        if(res.data.code === 200) {
          this.eqtRecordDatas = res.data.result
          this.$nextTick(() => {
            this.$refs.equipmentMaintenanceRecordTable.formDataInit(reflash)
          })
        }else {
          this.$notify.error({
            title: "错误",
            message: res.data.message,
          });
        }
      });
    },
    tabClick(tab) {
      if(tab === 'eqtInfo') {

      }else if(tab === 'maintenanceInfo') {

      }else if(tab === 'record') {
        this.getEqtRecord(true)
      }else if(tab === 'electric') {
        this.getEqtElectric()
      }
    },
    getEqtElectric() {
      let nowTimes = new Date()
      let endDate = utils.formatDate("yyyy-MM-dd", nowTimes) + ' 23:59:59';
      nowTimes.setDate(nowTimes.getDate() - 30)
      let startDate = utils.formatDate("yyyy-MM-dd", nowTimes) + ' 00:00:00';
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "equipmentInfo/equipmentIndexHistoryList",
        method: "post",
        data: {
          equipmentId: this.equipmentInfo.equipmentId,
          startDate: startDate,
          endDate: endDate
        }
      }).then((res) => {
        if(res.data.code === 200) {
          let xDatas = []
          let mainDatas = []
          let backUpDatas = []
          for(let i in res.data.result) {
            xDatas.push(res.data.result[i].createDate)
            mainDatas.push(res.data.result[i].electricityMain)
            backUpDatas.push(res.data.result[i].electricityBackup)
          }
          let echarts = require('echarts')
          this.electricChart = echarts.init(this.$refs['electricChart'])
          this.electricChart.setOption({
            title: {
              text: '电量曲线',
              x:'center',
              y:'8',
              textStyle: {
                color: '#000',
                fontWeight: 'normal',
                fontSize: '18'
              }
            },
            color: ['#9290FF'],
            tooltip: {
              trigger: 'axis'
            },
            grid: {
              left: '6%',
              bottom: '7%',
              top: '18%',
              height: '70%',
              right: '2%',
              show: true,
              // backgroundColor: '#002738'
              // containLabel: true
            },
            xAxis: {
              type: 'category',
              axisLine: {
                lineStyle: {
                  color: '#000',
                }
              },
              axisLabel: {
                show: true,
                fontSize: 10
              },
              boundaryGap: false,
              data: xDatas
            },
            yAxis: {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#000'
                }
              },
              axisLabel: {
                show: true,
                fontSize: 10
              },
              splitLine: {
                lineStyle: {
                    color: ['#DFEAFA']
                }
              },
              scale:false
            },
            dataZoom: [{
              height: 15,
              bottom: 10,
              fillerColor: '#A2CBFA', //选中范围的填充颜色。
              borderColor: '#A2CBFA', //边框颜色。
              textStyle: {
                color: "#A2CBFA"
              },
              handleStyle: {
                color: "#A2CBFA"
              },
              startValue: xDatas.length > 10 ? xDatas[xDatas.length - 10] : (xDatas.length > 0 ? xDatas[0] : ''),
              endValue: xDatas.length > 0 ? xDatas[xDatas.length - 1] : ''
            }, {
              type: 'inside'
            }],
            series: [
              {
                name: '主电源',
                type: 'line',
                smooth: true,
                data: mainDatas,
                itemStyle : {
                  normal : {
                    lineStyle:{
                      color:'#F8D089'
                    }
                  }
                }
              },
              {
                name: '备用电源',
                type: 'line',
                smooth: true,
                data: backUpDatas,
                itemStyle : {
                  normal : {
                    lineStyle:{
                      color:'#A2CBFA'
                    }
                  }
                }
              }
            ]
          })
          this.$nextTick(() => {
            this.electricChart.resize()
          })
        }else {
          this.$notify.error({
            title: "错误",
            message: res.data.message,
          });
        }
      });
    },
    recordTableBtnClick(item) {
      if (item.button === 'recordAdd') {
        this.equipmentRecord = {
          recordText: ''
        }
        this.equipmentRecordAddDialogFlag = true
      }
    },
    closeRecordAddDialog() {
      this.equipmentRecordAddDialogFlag = false
    },
    saveRecord() {
      this.$refs['recordAdd_form'].validate((valid) => {
        if (valid) {
          this.$fetch({
            url: process.env.PROGOO_GATE_WATER + 'equipmentUsedRecord/save',
            method: "post",
            data: {
              eid: this.equipmentInfo.equipmentId,
              createUser: localStorage.getItem('username'),
              recordContent: this.equipmentRecord.recordText
            }
          }).then(res => {
            if (res.data.code === 200) {
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
              this.getEqtRecord(true)
              this.closeRecordAddDialog()
            }else {
              this.$notify.error({
                title: '错误',
                message: res.data.message
              });
            }
          })
        } else {
          return false;
        }
      });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.equipmentMaintenance{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 15px;
  overflow-y: scroll;
  .equipmentMaintenance_formItem {
    float: left;
  }
  .equipmentMaintenance_table {
    width: 100%;
    overflow-y: unset;
  }
  .equipTypeSelect {
    width: 100%;
  }
}
.equipmentInfo_dialog {
  width: 100%;
  .equipmentInfo_bg {
    max-height: 600px;
    width: 100%;
    overflow: hidden;
    overflow-y: scroll;
    .equipmentInfo_text {
      color: #777;
    }
    .metaTab_itemBg {
      width: 100%;
      height: 500px;
      overflow-y: scroll;
      overflow-x: hidden;
      .maintenanceInfo_formItem {
        width: 50%;
        float: left;
        .maintenanceInfo_text {
          color: #777;
        }
      }
      .maintenanceInfo_imgArea {
        width: 33%;
        box-sizing: border-box;
        float: left;
        padding: 0 10px;
        .maintenanceInfo_img {
          width: 100%;
          float: left;
        }
      }
    }
  }
  .equipmentRecordAdd_bg {
    width: 100%;
    box-sizing: border-box;
    padding-right: 25px;
    .equipmentInfo_input {
      width: 100%;
    }
  }
}
.electricChart {
  width: 100%;
  height: 400px
}
.equipmentInfo_dialog .el-dialog__body {
  padding-right: 0px!important;
}
.dialogFooter {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}
</style>
